<template>
  <div class="page">
    <!-- 顶部筛选 开始 -->
    <div class="top_filter">
      <van-dropdown-menu active-color="#3388ff">
        <van-dropdown-item v-model="combinedId" :options="combinedList" @change="onChange" />
        <van-dropdown-item v-model="classId" :options="classList" @change="onChange" />
        <van-dropdown-item v-model="projectId" :options="projectList" @change="onChange" />
        <van-dropdown-item v-model="servicesId" :options="servicesList" @change="onChange" />
      </van-dropdown-menu>
    </div>
    <!-- 顶部筛选 end -->

    <!-- 医院列表 开始 -->
    <div class="list_box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :offset="30" @load="loadMore">
        <template v-if="hospitalList && hospitalList.length">
          <hospital v-for="(item, index) in hospitalList" :key="`hospital_${index}`" :info="item"></hospital>
        </template>
        <no-data v-else></no-data>
      </van-list>
    </div>
    <!-- 医院列表 end -->
  </div>
</template>
<script>
import { DropdownMenu, DropdownItem, List } from "vant";
import Hospital from "@/components/hospital/index.vue";
import {
  PLATFORM_TYPE,
  GET_HOSPITAL_SEARCH,
  GET_HOSPITAL_COMBINED_OPTIONS,
  GET_HOSPITAL_CLASS_OPTIONS,
  GET_HOSPITAL_PROJECT_OPTIONS,
  GET_HOSPITAL_SERVICES_OPTIONS,
  GET_SEO_SETTING_INFO,
} from "@/http/interface";
import { getDistance } from "@/utils/utils";
export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
    Hospital,
  },
  data() {
    return {
      combinedId: "",
      classId: "",
      projectId: "",
      servicesId: "",
      combinedList: [],
      classList: [],
      projectList: [],
      servicesList: [],
      hospitalList: [],
      totalElements: 0,
      seoInfo: {},
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 20
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/hospital`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, $cookies }) {
    //let res = await $axios.get(GET_HOSPITAL_SEARCH, { params: { pageNumber: 1, pageSize: 20 } })
    let city = $cookies.get("city");
    let oParams = { pageNumber: 1, pageSize: 20 };
    if (city && city != "全国") {
      oParams.city = city;
    }

    let combinedId = Number(query.combinedId) || "";
    let classId = Number(query.classId) || "";
    let projectId = Number(query.projectId) || "";
    let servicesId = Number(query.servicesId) || "";

    oParams.combinedId = combinedId;
    oParams.classId = classId;
    oParams.projectId = projectId;
    oParams.servicesId = servicesId;

    let [res1, res2, res3, res4, res5] = await Promise.all([
      $axios.get(GET_HOSPITAL_SEARCH, { params: oParams }),
      $axios.get(GET_HOSPITAL_COMBINED_OPTIONS),
      $axios.get(GET_HOSPITAL_CLASS_OPTIONS),
      $axios.get(GET_HOSPITAL_PROJECT_OPTIONS),
      $axios.get(GET_HOSPITAL_SERVICES_OPTIONS),
    ]);
    let obj = res1.data || {};
    let combinedList = [{ text: "综合排序", value: "" }];
    let classList = [{ text: "医院类型", value: "" }];
    let projectList = [{ text: "擅长项目", value: "" }];
    let servicesList = [{ text: "特色服务", value: "" }];

    (res2.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      combinedList.push(k);
    });

    (res3.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      classList.push(k);
    });

    (res4.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      projectList.push(k);
    });

    (res5.data || []).map((k) => {
      k.text = k.name;
      k.value = k.id;
      servicesList.push(k);
    });

    let list = obj.list || [];

    // list.map(k => {
    //   k.meter = getDistance(k.lng, k.lat, gps.lng, gps.lat);
    //   return k;
    // })

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 1, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return {
      hospitalList: list,
      combinedList: combinedList,
      classList,
      projectList,
      servicesList,
      combinedId,
      classId,
      projectId,
      servicesId,
      seoInfo,
      totalElements: obj.totalElements,
    };
  },
  mounted() {
    this.setDistance();
  },
  methods: {
    // 监听下拉菜单
    onChange(e) {
      let params = this.$route.query;
      console.log(params);
      this.$router.replace({
        path: "/hospital",
        query: {
          ...params,
          combinedId: this.combinedId,
          classId: this.classId,
          projectId: this.projectId,
          servicesId: this.servicesId,
        },
      });
    },

    // 设置距离
    setDistance() {
      let _this = this;
      let gps = this.$cookies.get("GPS") || {};
      let list = this.hospitalList || [];
      if (!gps.lng) {
        navigator.geolocation.getCurrentPosition(function (position) {
          let g = position.coords || {};
          console.log(g);
          list.map((k) => {
            let m = getDistance(k.lng, k.lat, g.longitude, gps.latitude);
            k.mm = m;
            return k;
          });
          _this.$set(this, "hospitalList", list);
        });
        return false;
      }
      list.map((k) => {
        let m = getDistance(k.lng, k.lat, gps.lng, gps.lat);
        k.mm = m;
        return k;
      });
      _this.$set(this, "hospitalList", list);
      //console.log(gps)
    },

    // 获取参数
    getParams() {
      let params = {};
      params.combinedId = this.combinedId;
      params.classId = this.classId;
      params.projectId = this.projectId;
      params.servicesId = this.servicesId;
      params.pageNumber = this.pageNumber;
      params.pageSize = this.pageSize;

      let city = this.$cookies.get("city");
      if (city && city != "全国") {
        params.city = city;
      }
      return params;
    },

    // 触底加载
    loadMore() {
      let totalElements = this.totalElements;
      let list = this.hospitalList;
      let num = this.pageNumber;
      console.log(list.length + '----' + totalElements)
      // 判断是否还有下一页
      if (list.length < totalElements) {
        this.pageNumber = num + 1;
        this.getList();
      }else{
        this.finished = true;
      }
    },

    // 获取列表
    async getList() {
      let oParams = this.getParams();
      let olist = this.hospitalList;
      this.loading = true;
      let res = await this.$axios.get(GET_HOSPITAL_SEARCH, { params: oParams });
      this.loading = false
      if (res.code == 200) {
        let obj = res.data || {};
        let nList = obj.list || [];
        let n = olist.concat(nList);
        this.hospitalList = n;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/hospital.less";
</style>